<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>商品</p>
			<table>
				<thead>
					<tr>
						<th>商品</th>
						<th>单价</th>
						<th>颜色</th>
						<th>库存</th>
						<th>好评</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in shopArr">
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>{{item.color}}</td>
						<td>{{item.count}}</td>
						<td>{{item.goodCommon}}</td>
						<td><button @click="addShop(item)">添加</button></td>
					</tr>
				</tbody>
			</table>
			<p>购物车</p>
			<table>
				<thead>
					<tr>
						<th>商品</th>
						<th>单价</th>
						<th>数量</th>
						<th>全额</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in cartArr" :key="item.name">
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>
							<button type="button" @click="item.size===1?item.size=1:item.size--">-</button>
							<input type="text" :value="item.size" readonly />
							<button type="button" @click="item.size++">+</button>
						</td>
						<td>{{item.size*item.price}}</td>
						<td><button @click="delShop(index)">删除</button></td>
					</tr>
				</tbody>
				<tfoot>
					<tr><td>总计</td><td>{{sumPrice}}</td></tr>
				</tfoot>
			</table>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					shopArr:[
						{name:"鼠标",price:23,color:"黄色",count:345,goodCommon:231},
						{name:"电脑",price:956,color:"绿色",count:134,goodCommon:23},
						{name:"键盘",price:32,color:"黑色",count:543,goodCommon:123},
						{name:"显示器",price:545,color:"黑色",count:234,goodCommon:43},
						{name:"显卡",price:532,color:"白色",count:231,goodCommon:212},
						{name:"CPU",price:432,color:"蓝色",count:221,goodCommon:231},
						{name:"液冷",price:234,color:"天蓝色",count:123,goodCommon:434},
					],
					cartArr:[]
				},
				methods:{
					addShop({name,price}){
						// this.cartArr.some(v=>v.name===name
						let filterShop=this.cartArr.filter(v=>v.name===name);
						if(filterShop.length){
							filterShop[0].size++;
						}else{
							this.cartArr.push({name,price,size:1});
						}
					},
					delShop(index){
						this.cartArr.splice(index,1)
					}
					
				},
				computed:{
					sumPrice(){
						let sum=0;
						this.cartArr.forEach(v=>{
							sum+=v.price*v.size;
						})
						return sum;
					}
				}
			})
		</script>
	</body>
</html>
